<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>列表页面</title>
  <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/list.css">
  <!-- 导入 分页显示插件的 css外部文件 -->
  <link rel="stylesheet" href="../jquery-pagination/pagination.css">
  <style>
    .breadcrumb{
      padding-left: 6px;
      padding-right: 6px;
    }
  </style>
</head>
<body>
   <!-- 抬头 -->
    
   <div class="bittle-cen">
    <!--头部导航 -->
        <div class="bittle">
            <div class="bittle-pic fl">
                <img src="../img/moguji.png" alt="huawei">
            </div>
            <div class="bittle-name fl">
                <span>|</span>
                <p>某街商城</p>
            </div>
        </div>
      <div class="bittle-big">
      </div>

    </div>
<div class="bittle-big2"></div>  

  <!-- 搜索框 -->
  <div class="pagi"></div>

  <!-- 内容处 -->
  <!-- 外面的大盒子 -->
  <div class="container">
    <!-- 每一个产品介绍 盒子里包ul-->
    <ul>
      


    </ul>
  </div>

  
              <!-- 底部 -->
              <div class="bottom">
                <div class="bottom-cen">
                  <div class="bottom-cenn">
                    <ul>
                        <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                        <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                        <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                        <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
    
                    </ul>
                </div>
                </div>
              </div>



              <script src="../js/jquery.min.js"></script>
              <script src="../jquery-pagination/jquery.pagination.js"></script>
              <script src="../js/tools.js"></script>
              <script>
                // 1, 获取和设定参数数据
            // 获取 浏览器地址栏中 存储的 cat_one_id 参数
            const urlObj = getUrlVal();
            console.log( urlObj );

            // 设定当前页数参数 默认值是 1 
            // 也就是初始状态 显示第一页
            let page = 1;

            // 根据实际项目需求,设定每页显示数据数量
            // 目前随便写一个8
            let line = 8;

            // 调用函数 , 当前page的数值是 1
            setPage()


            // 封装一个函数 向页面发送请求
            // 并且 动态渲染生成初始页面
            function setPage(){
              // 向PHP程序发送请求
              $.ajax({
                url:'../server/goods_list.php',
                type:'get',
                data:{ cat_one_id: urlObj.cat_one_id , page: page , line:line },
                dataType: 'json',
                success:res=>{
                  // 响应体res中
                  // data 以数组的形式存储8条数据
                  // page 当前页数
                  // row  当前分类数据总数量
                  // sumPage 当前分类 根据当前每页数据数量 计算的总页数
                  // line 当前设定的每页的数据数量
                  // 根据 data 中存储的数据,动态渲染生成页面
                  console.log(res);

                  // 动态渲染生成页面
                  let str = '';
                  res.data.forEach(item=>{
                    str += `
                    <li class="list-item">
                      <div class="panel panel-primary">
                        <div class="panel-body">
                          <ol class="breadcrumb">
                            <li><a href="Javascript:;">${item.cat_one_id}</a></li>
                            <li><a href="Javascript:;">${item.cat_two_id}</a></li>
                            <li class="active">${item.cat_three_id}</li>
                          </ol>
                        </div>
                        <div class="panel-footer">
                          <div class="row">
                            <div class="">
                              <div class="thumbnail">
                                <img src="${item.goods_big_logo}" alt="...">
                                <div class="caption">
                                  <h3>${item.goods_name}</h3>
                                  <p>
                                    <i class="glyphicon glyphicon-yen"></i>
                                    <span>${item.goods_price}</span>
                                  </p>
                                  <p>
                                    <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                                    <a href="./fangdajing.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    `;
                  })

          // 写入标签对象
          $('.container ul').html(str);

          // 获取数据库数据,根据响应结果,设定分页显示程序
          $('.page').pagination({

            pageCount: res.sumPage ,    // 总页数
            totalData: res.row,         // 数据总数量
            current: res.page,          // 当前第几页
            showData: res.line,         // 每页数据数量
            prevCls: 'prev',            // 上一页的类名  默认是prev有样式效果修改之后样式效果就没有了
            nextCls: 'next',            // 下一页的类名
            prevContent: '上一页',       // 上一页节点内容 标签中显示的文字内容
            nextContent: '下一页',       // 下一页节点内容 标签中显示的文字内容
            mode: 'fixed',              // 固定分页显示,页数按钮的数量
            count: 4,                   // 分页按钮的数量,不算当前页是4个多余的按钮,一共是5个按钮
            coping: true,               // 显示 首页 末页 默认显示 首页末页数值
            homePage: '首页',           // 设定首页节点内容 也就是显示的文字 
            endPage: '末页',            // 设定末页节点内容 也就是显示的文字 
            isHide: true,               // 总页数为 0 或者 1 时 隐藏分页控件
            keepShowPN: false,          // 第一页隐藏上一页 最后一页隐藏下一页  mode要设定为 unfixed
            jump: true,                 // 开启跳转
            // jumpIptCls: '',          // input输入框class类名设定
            // jumpBtnCls: '',          // 跳转按钮的类名
            jumpBtn: '跳转',            // 跳转按钮的文字内容
            callback: function(val){       // 回调函数
              // console.log( val );
              // 点击的分页控件(按钮)  对应的页数
              // console.log( val.getCurrent() );
              // 根据获取的 点击控件 对应的页数,设定变量page
              page = val.getCurrent();
              // 根据新的 page 的数据 向数据库再次发起请求
              // 再次动态渲染生成页面
              setPage();
            }
        });
        }
      })
    }
              </script>
</body>
</html>
